<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            padding:10px
        }
    </style>
</head>
<body>
    <div style="background-color: red;height: 100px;display: flex; justify-content: space-between;flex-wrap: wrap; align-items: stretch;">
        <span style="vertical-align: bottom;background: #ccc;"> bottom</span>
        <span style="vertical-align: middle;"> middle</span>
        <span style="vertical-align: bottom;"> bottom</span>
        <span style="vertical-align: bottom;"> bottom</span>
   
        <span style="vertical-align: bottom;"> bottom</span>
        <span style="vertical-align: bottom;"> bottom</span>
        <span style="vertical-align: bottom;"> bottom</span>
        <span style="vertical-align: top;"> top</span>
        <span style="vertical-align: baseline;"> baseline</span>
        <span style="vertical-align: baseline; position: relative;
        
        color:blue;order:-1;background: #000;">  position: relative;top:100%;color:blue</span>
        <span style="vertical-align: baseline;"> baseline</span>
        <img src="/img.png" width="70" height="70" alt="" style="position: relative;vertical-align: top;">
        <span style="vertical-align: baseline;"> baseline</span>
        <span style="vertical-align: middle;"> middle</span>
        <span style="vertical-align: top ; background: #ccc;"> </span>
        <!-- <span style="vertical-align: top;float:left;position: absolute;"> float</span> -->

        <!-- <span>11</span> -->
        <!-- <img src="" alt=""> -->
        
        <!-- <img src="/img.png" width="50" height="50" alt=""  > -->
        <!-- <span style="vertical-align: bottom;"> 我是一段文字</span> -->
        <!-- <span style="line-height: 60px;vertical-align: top;"> 我是一段文字</span> -->
        <span > 我是一段文字</span>
        <!-- <img src="/img.png" width="70" height="70" alt="" style="position: relative;vertical-align: bottom;"> -->
        <span style="vertical-align: bottom;"> bottom</span>

    </div>
</body>
</html>